<template>
  <router-link :to="`problems/${this.problem.problem_id}`"
               class="card-container">
    <div class="card-title">
      {{ problem.problem_title }}
    </div>
    <div class="card-level">
      {{ level[problem.problem_level] }}
    </div>
    <div class="statistics">
      <div>
        总通过次数：{{ problem.AC_times }}
      </div>
      <div>
        总尝试次数：{{ problem.all_times }}
      </div>
      <div>
        通过率：{{ pass_per }}%
      </div>
    </div>
  </router-link>
</template>
<script>
export default {
  props: {
    problem: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      level: ['简单', '中等', '困难']
    }
  },
  computed: {
    pass_per: function () {
      return ((Number(this.problem.AC_times) * 100) / Number(this.problem.all_times)).toFixed(2)
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl'

.card-container
  display flex
  flex-direction column
  justify-content center
  align-items center
  width 300px
  height 185px
  background-color #00dfff
  color #fff
  font-weight 600
  border-radius 6px
  transition all 0.3s ease-in-out
  cursor pointer
  box-sizing border-box
  &:hover
    transform scale(1.05)
  .card-title
    margin-bottom 5px
    width 75%
    font-size 22px
    text-align center
  .card-level
    font-size 18px
    margin-bottom 5px
  .statistics
    font-size 16px
    right 10px
    bottom 10px
</style>
